<template>
  <div class="page">
    <!-- header -->
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="设置"
    ></van-nav-bar>
    <div class="app-page">
      <div class="set-cells">
        <van-cell-group>
          <van-cell center icon="friends" title="头像">
            <template #right-icon>
              <span class="r set-head" @click.stop="uploadHeadImg">
                <!-- <img
                  class="set-head-icon"
                  :src="avatar"
                  style="width: 40px;height: 40px;"
                /> -->
              </span>
              <!-- <van-uploader :after-read="afterRead" :max-count="1"> -->
              <van-uploader
                :after-read="afterRead"
                :max-count="1"
                accept="images"
              >
                <img
                  class="set-head-icon"
                  :src="baseURL + avatar"
                  style="width: 40px;height: 40px;"
                />
                <!-- @click="getPicFile" -->
              </van-uploader>
              <!-- </van-uploader> -->
            </template>
          </van-cell>
          <van-cell icon="manager" title="昵称" :value="set.username" />
          <van-cell
            to="/changePhone"
            icon="phone"
            title="手机号"
            :value="set.phone"
          />
        </van-cell-group>
        <van-cell-group>
          <van-cell
            to="/changedPassword"
            icon="lock"
            title="修改密码"
            :value="password"
          />
          <van-cell
            @click="href('BankCard')"
            icon="card"
            title="银行卡"
            :value="bankCard"
          />
        </van-cell-group>
      </div>
    </div>

    <!-- 退出按钮 -->
    <!-- 如果有token有值，则显示 退出按钮，如果没值，则用户没登录，就隐藏退出按钮 -->
    <div @click="indent" v-if="condition" class="set-button">退出登录</div>
  </div>
</template>
<script>
// import { baseURL } from "../../assets/js/config";
import {
  basicInformation,
  userLogOut,
  updateAvater
} from "../../assets/js/api/user.js";
import { Toast, Dialog } from "vant";
import { baseURL } from "../../assets/js/config";
export default {
  data() {
    return {
      // text: "",
      set: {},
      condition: true,
      img: "",
      // nickname: "",
      // phone: "",
      password: "********",
      bankCard: "",
      avatar: "",
      baseURL: ""
    };
  },
  created() {
    this.baseURL = baseURL;
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    this.button();
    basicInformation().then(res => {
      // console.log(res);
      this.set = res.data;
      this.avatar = this.set.img;
      if (res.data.yhk === null) {
        this.bankCard = "未绑定";
      } else {
        // res.data.yhk
        this.bankCard =
          res.data.yhk.substr(0, 4) + "********" + res.data.yhk.substr(-4);
      }
    });
  },

  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let _this = this;
      console.log(file);
      // console.log(file.content);
      // let data = new FormData();
      // data.append("file", file.file); // 文件对象

      // console.log(data);
      // let header = {
      //   "Content-Type": "multipart/from-data"
      // };
      let type = file.file.type.split("/");
      console.log(type[1]);
      let obj = {
        img: file.content
        // type: type[1]
      };
      updateAvater(obj).then(res => {
        if (res.code == 0) {
          Toast.success("上传成功");
          console.log(res);
          _this.avatar = res.msg;
          // // console.log(res);
          localStorage.setItem("img", res.msg);
        }
      });
    },
    getPicFile() {
      let _this = this;
      let dsBridge = require("dsbridge");
      dsBridge.call("getPicFile", "", function(data) {
        Toast(data);
        let obj = {
          img: data
        };
        // console.log(obj);
        updateAvater(obj).then(res => {
          if (res.code == 0) {
            console.log(res);
            Toast.success("上传成功");
            // console.log(res);
            _this.avatar = res.msg;
            // // console.log(res);
            localStorage.setItem("img", res.msg);
          }
        });
      });
    },
    // afterRead(file) {
    //   // 此时可以自行将文件上传至服务器
    //   // console.log(file);
    //   this.avatar = file.content;
    //   let obj = {
    //     img: file.content
    //   };
    //   updateAvater(obj).then(res => {
    //     // console.log(res);
    //     localStorage.setItem("img", res.msg);
    //     localStorage.getItem("img");
    //   });
    // },

    button() {
      if (sessionStorage.getItem("token") || localStorage.getItem("token")) {
        this.condition = true;
        this.img = localStorage.getItem("img");
      } else {
        this.condition = false;

        this.img = "";
        this.nickname = "";
        this.phone = "";
        this.password = "";
        this.bankCard = "";
      }
    },

    indent() {
      userLogOut().then(res => {
        if (res.code == 0) {
          localStorage.removeItem("token");
          sessionStorage.removeItem("token");
          this.img = "";
          this.nickname = "";
          this.phone = "";
          this.password = "";
          this.bankCard = "";
          this.set = {};
          this.$router.go(-1);
          Toast.fail("退出成功");
          // alert("退出成功");
        } else {
          Dialog.alert({
            message: "网络错误，请稍后再试"
            // theme: "round-button"
          }).then(() => {
            // on close
          });
        }
        this.button();
      });
    },
    href(url) {
      this.$router.push({ path: url });
    },

    onClickLeft() {
      this.$router.go(-1); //返回上一层
    }
  },
  components: { [Dialog.Component.name]: Dialog.Component }
};
</script>
<style scoped>
.app-page {
  background-color: #f5f5f5;
}
/* .set-cells /deep/ .van-cell-group{ */
/* margin-bottom: 15px; */
/* } */
.set-head {
  position: relative;
  top: 0.7em;
}
.set-head-icon {
  width: 2em;
  border-radius: 50%;
}
.dn {
  display: none;
}
</style>
